/*
 * @Author: liuxinye
 * @Date: 2022-01-17 18:18:03
 * @LastEditors: liuxinye
 * @LastEditTime: 2022-08-08 16:57:25
 * @Description: 画线
 */
<script setup lang="ts">
import { ref , reactive, render, onMounted } from 'vue';
import {Scene , PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, 
Mesh, LineBasicMaterial, BufferGeometry,BufferAttribute, Line} from 'three'
onMounted(()=>{
    //创建场景
    const scene = new Scene();
    //创建相机(透视相机)
    let camera=new PerspectiveCamera(45,window.innerHeight/window.innerHeight,1,500);
    camera.position.set(0,0,100);
    camera.lookAt(0,0,0);
    //创建渲染器
    const renderer= new WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    (document.getElementById('canvas') as HTMLElement).appendChild(renderer.domElement);
    //创建蓝线
    const material= new LineBasicMaterial({color:0x0000ff});
    // const material = new MeshBasicMaterial( { color: 0xff0000 } );
    const geometry =new BufferGeometry()
    const vertices = new Float32Array( [
        -10, 0, 0,
        0, 10, 0,
        10, 0, 0
    ] );
    console.log(geometry);
    
    geometry.setAttribute("position",new BufferAttribute( vertices, 3 ) );
    const line = new Line( geometry, material );
    scene.add(line)
    //动画渲染
    function animate(){
        requestAnimationFrame(animate);
        line.rotation.x += 0.01;
        // // line.rotation.y += 0.01;
        line.rotation.z += 0.01;
        renderer.render(scene,camera);
    }
    animate()
})



</script>
<template>
  <div id="canvas"></div>
</template>
<style lang="scss" scoped>

</style>
